<template>
    <ECH :option="option" v-if="Flag"></ECH>
</template>

<script setup lang="ts">
import ECH from './ECharts/ECH.vue';
import { getrighttop } from '../api/server'
import  { onMounted,ref } from 'vue';

const option =ref( {
  legend: {
   textStyle:{
      color:'#fff'
  },
  },
  tooltip: {},
  
  dataset: {
    source: [
      ['product', '2015', '2016', '2017'],
      ['Matcha Latte', 43.3, 85.8, 93.7],
      ['Milk Tea', 83.1, 73.4, 55.1],
      ['Cheese Cocoa', 86.4, 65.2, 82.5],
      ['Walnut Brownie', 72.4, 53.9, 39.1]
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  // Declare several bar series, each will be mapped
  // to a column of dataset.source by default.
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
});
const Flag = ref<any>(false);
onMounted(async()=>{
   const res = await getrighttop();
  //  console.log(res.data.data.result[0],'ajsdnnco======================');
   option.value.yAxis = res.data.data.result[0].xAxis
   option.value.xAxis = res.data.data.result[0].yAxis
   option.value.series = res.data.data.result[0].series
   Flag.value = true 
})


</script>

<style scoped>
#main1{
    width: 100%;
    height: 100%;
}
</style>